<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
<!--@ ===> v-on:click 用于事件的绑定  -->
<!--事件修饰符： - stop ：阻止事件冒泡
                - .prevent：阻止默认事件发生
                - .capture：使用事件捕获模式
                - .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
                - .once：只执行一次
-->
        <div id="app" >
           <div style="height: 600px; width: 600px; background-color: aqua" @click="div()">
               <input type="button" value="点我" @click.stop="but()">
           </div><br>

            <!-- 阻止自身默认事件      -->
            <a href="http://www.baidu.com" @click.prevent="bai()">百度</a>


        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    name:"刘德华",
                    num:0
                },
                methods:{
                    but() {
                        alert("button")
                    },
                    div() {
                        alert("div")
                    },
                    bai() {
                        alert("百度")
                    }

                }
            })
        </script>
    </body>
</html>